<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户-我喜欢-歌曲</title>
		<script src="../../../../js/vue.js"></script>
		<script src="../../../../js/element.js"></script>
		<script src="../../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../../../css/menus/mySong/love/song.css" />
	</head>
	<body>
		<div id="app">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr class="title">
					<td>歌曲</td>
					<td>歌手</td>
					<td>专辑</td>
				</tr>
				<tr class="list" v-for="(song ,i) in songList">
					<!-- 歌曲 -->
					<td>
						<span>
							<!-- 序号 -->
							<span v-if="i<10">
								&nbsp;&nbsp;0{{i+1}}&nbsp;&nbsp;&nbsp;
							</span>
							<span v-else>
								&nbsp;&nbsp;{{i+1}}&nbsp;&nbsp;&nbsp;
							</span>
							<!-- 爱心 -->
							<span>
								<i v-if="song.isLove===0" class="iconfont icon-aixin"
									@click="changeLove(1, song.songId)"></i>
								<i v-else class="iconfont icon-aixin_shixin" style="color: #FC6C62;"
									@click="changeLove(0, song.songId)"></i>&nbsp;
							</span>
							<!-- 歌名 -->
							{{song.songName}}
						</span>
						<span class="controlls">
							<!-- 播放 -->
							<i id="palyButton" class="iconfont icon-24gl-play" @click="play(i)"></i>
							<!-- 添加到 -->
							<i @click="add(song)" class="iconfont icon-tianjia"></i>
							<!-- 下载 -->
							<i @click="songLoad(song.songUrl, song.songName)" class="iconfont icon-xiazai"></i>
							<!-- 更多操作 -->
							<i class="iconfont icon-gengduocaozuo"></i>&nbsp;&nbsp;
						</span>
					</td>
					<!-- 歌手 -->
					<td>
						<span v-for="singer in song.singer" @click="toSinger(singer.singerId)">
							{{singer.singerName}} &nbsp;&nbsp;
						</span>
					</td>
					<!-- 专辑 -->
					<td>
						<span v-for="album in song.album" @click="toAlbum(album.albumId)">
							{{album.albumName}} &nbsp;&nbsp;
						</span>
					</td>
				</tr>
			</table>

			<!-- 添加歌单 -->
			<el-dialog id="el-dialog" title="添加歌单" :visible.sync="addFormVisible" width="15%">
				<div class="main">
					<div ><el-tag type="info" @click="addPlayList">播放列表</el-tag></div>
					<div v-for="sheet in sheetList">
						<el-tag type="success" @click="addSheet(sheet.id)">{{sheet.name}}
						</el-tag>
					</div>
				</div>
			</el-dialog>
		</div>
	</body>
	<script type="module">
		// 文件下载
		import {download} from '../../../../js/utils/downloadMp3Util.js'
		
		new Vue({
			el: '#app',
			data: function() {
				return {
					songList: '', //专辑信息
					currentIndex: -1, //当前正在播放的歌曲下标，-1 还没有开始播放
					sheetList: '', //歌单列表
					addFormVisible: false,
					songId : -1, 
					song:'',
					parentSongList:''
				}
			},
			mounted() { // 生命周期函数
				// this.getFatherInfo()
				// window.getAlbumCurrentIndex = this.getAlbumCurrentIndex
				this.getLoveSong()
				window.getMySongCurrentIndex = this.getMySongCurrentIndex
			},
			methods: {
				// 获取用户我喜欢的歌
				getLoveSong() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getLove/1',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.songList = res.data.data.songList

							// 将数据发送给子页面
							// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
							// window.toChildData = this.album
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 播放按钮 
				play(i) {
					console.log('songList歌曲下标' + i)
					// 判断播放状态
					const playButtonDocument = document.querySelectorAll('#palyButton')
					const tdDocument = document.querySelectorAll('.list')

					// 先把所有带点击样式的去掉（之前点击的）
					for (var j = 0; j < playButtonDocument.length; j++) {
						// 不包括正在点击的，跳过
						if (j == i) {
							continue;
						}
						if (playButtonDocument[j].classList.contains('icon-24gf-pause2')) { //暂停
							playButtonDocument[j].classList.remove('icon-24gf-pause2')
							playButtonDocument[j].classList.add('icon-24gl-play')
							playButtonDocument[j].style.color = '#000'

							tdDocument[j].style.background = '#fff'
							tdDocument[j].style.color = '#000'
						}
					}

					// 播放
					if (playButtonDocument[i].classList.contains('icon-24gl-play')) {
						playButtonDocument[i].classList.remove('icon-24gl-play')
						playButtonDocument[i].classList.add('icon-24gf-pause2')
						playButtonDocument[i].style.color = '#FC6C62'

						tdDocument[i].style.background = '#EDEDED'
						tdDocument[i].style.color = '#FC6C62'

						// 正在播放的歌曲下标
						this.currentIndex = i
						window.top.getChildrenSongList(this.songList, this.currentIndex)
					} else if (playButtonDocument[i].classList.contains('icon-24gf-pause2')) { //暂停 
						playButtonDocument[i].classList.remove('icon-24gf-pause2')
						playButtonDocument[i].classList.add('icon-24gl-play')
						playButtonDocument[i].style.color = '#000'

						tdDocument[i].style.background = '#fff'
						tdDocument[i].style.color = '#000'
						// 正在播放的歌曲下标
						this.currentIndex = -1
						window.top.getChildrenSongList(this.songList, this.currentIndex)
					}
				},
				// 获取父页面正在播放的下标
				getMySongCurrentIndex(currentIndex) {
					console.log(currentIndex)
					this.currentIndex = currentIndex
					this.play(currentIndex)
				},
				// 跳转到 singer 页面
				toSinger(id) {
					const topHtml = window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'singer/singer.html?id=' + id)
				},
				// 跳转到 album 页面
				toAlbum(id) {
					const topHtml = window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'album/album.html?id=' + id)
				},
				// 是否我喜欢
				changeLove(flag, id) {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/changeLove/1/' + flag + '/' + id,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							window.parent.getUserInfoCount()
							this.getLoveSong()

						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 添加到
				add(song) {
					this.addFormVisible = true
					this.getSheet()
					this.songId = song.songId
					this.song = song
					// this.parentSongList = window.top.songList
					
					console.log(this.parentSongList)
				},
				// 获取登录用户创建的歌单
				// 获取父页面的一些数据
				getSheet() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getSheet',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.sheetList = res.data.data.sheetList
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 添加到播放列表
				addPlayList() {
					var flag = false
					this.parentSongList = window.top.songList
					for(var i=0; i<this.parentSongList.length; i++){
						if(this.parentSongList[i].songId == this.song.songId){
							this.$message.success("播放列表已存在，无须添加")
							flag = true
						}
					}
					if(flag!=true){
						window.top.songList.push(this.song)
						this.$message.success("添加成功")
						
					}
					this.parentSongList = window.top.songList
					this.addFormVisible = false
				},
				// 添加到歌单
				addSheet(id) {
					console.log(id);
					axios({
						method: 'post',
						url: 'http://localhost:8160/sheet/addSong/' + id + '/' + this.songId,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							this.addFormVisible = false
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 歌曲下载
				songLoad(url, name){
					download(url, name+'.mp3')
				},
			},
		})
	</script>
</html>